<!--<script src="__PUBLIC__/Admin/js/jquery-1.11.0.min.js"></script>-->
<script type="text/javascript" charset="utf-8" src="__PUBLIC__/Admin/js/ajaxfileupload.js"></script>
<script type="text/javascript" charset="utf-8" src="__PUBLIC__/bootstrap/js/bootstrap.min.js"></script>

<style type="text/css">
  .w240{width: 240px;}
  .sml-240{padding-left: 240px;}
</style>


<div id="content" class="">
        <div class="row">
          <div class="col-md-12">
            <!-- Input Fields -->
            <div class="panel">
              <div class="panel-heading">
                <span class="panel-title">添加视频</span>
              </div>
              <div class="admin-form theme-primary  center-block" style="padding-bottom: 175px; margin-top:30px; width:90%;">
              <div class="panel heading-border panel-primary">

                <?php

                  $isEdit = 0;
                  if (!empty($info)) {
                    $isEdit = 1;
                    $id = $info['id'];
                    $path = $info['path'];
                    $name = $info['name'];
                    $image = $info['image'];
                    $sort = $info['sort'];
                    $title = $info['title'];
                  }

                ?>

                <!-- 开始添加 -->
                <div style="padding-top: 50px">
                  <span class="fileupload-preview thumbnail m5 " >
                    <img class="img-responsive" id="video-img" src="{$image}"/>
                  </span>
                <form method="post" action="{:U('Column/saveVideoInfo')}">

                  <input type="file" class="gui-file" name="video" id="video">
                  <input type="hidden" id="img-path" name="image" value="{$image}">
                  <p class="help-block">请选择要上传的视频缩略图</p>


                  <div class="form-group">
                    <input type="file" id="file">
                    <p class="help-block">请选择要上传的视频</p>
                    <br>
                    <input type="text" name="path" id="video-path" value="{$path}"/>
                    <input type="hidden" name="name" id="video-name" value="{$name}">
                    <label for="sort">排序:</label>
                    <input type="text" name="sort" id="sort" value="{$sort}"/>
                  </div>
                  <button name="start" type="button" class="btn btn-success" disabled>开始上传</button>
                  <button name="pause" type="button" class="btn btn-default hide">暂停</button>
                  <br>


                  <input type="hidden" id="edit" name="edit" value="{$isEdit}"/>
                  <input type="hidden" id="editId" name="editId" value="{$id}"/>

                  <label  class="field prepend-icon ">
                    <input type="text" name="videoTitle" id="video-title" placeholder="请添加视频标题" class="gui-input" value="{$title}">
                  </label>



                  <button type="submit" class="button btn-primary">提交</button>
                </form>
                <br>
                <br>

                <div class="progress progress-striped hide">
                  <div class="progress-bar" style="width: 0%">
                    <span class="sr-only"></span>
                  </div>
                </div>
                </div>

                <!-- 结束添加 -->

              </div>
            </div>
            </div>
          </div>
        </div>
</div>

<script type="text/javascript">

// 在DOM加载前执行
~function($) {
  // 上传文件对象
  var file;

  // 每次上传文件段大小（字节）
  var preUploadSize = 1024 * 50;

  // 文件上传起始位置
  var start = 0;

  // 是否暂停
  var pause = false;

  $('#file').change(function() {
    // 为文件对象赋值
    var files = this.files;
    file = files[0];

    console.log(file);

    // 页面刷新文件信息
    $('.help-block').text('文件' + file.name + '长度:' + file.size + '字节');
    // 将开始按钮设置为可用
    $('button[name=start]').prop('disabled', false);
  });

  // 为开始按钮绑定事件
  $(document).on('click', 'button[name=start]', function() {
    // 首先查看服务器文件夹内是否已经上传该文件，如果有，获取文件大小
    var url = '__ROOT__/admin.php/Ajax/getFileSize/filename/' + encodeURIComponent(file.name);

    console.log(url);

    $.get(url, function(res) {
      console.log(res.status);
      console.log(res.size);
      if (res.status == 1) {
        start = res.size;
      }
      console.log(file.size);
      if (start < file.size) {
        // 显示进度条并且上传文件
        showprogress(start, file.size);
        upload(file);
      } else {
        uploadComplete();
        alert('上传结束');
        $('button[name=pause], .progress').addClass('hide');
      }
    }, 'json');
    $('button[name=pause], .progress').removeClass('hide');
    $(this).prop('disabled', true);
  });


  // 上传文件
  function upload(file) {
    // FormData对象用以将数据编译成键值对，以便用XMLHttpRequest来发送数据
    var data = new FormData();
    data.append('name', encodeURIComponent(file.name));
    data.append('file', file.slice(start, start + preUploadSize));
    data.append('start', start);

    var url = '__ROOT__/admin.php/Ajax/uploadVideo';

    $.ajax({
      type:'POST',
      url:url,
      data:data,
      // 设置 false 以使用文件上传的 Content-Type
      contentType:false,
      // 避开jQuery对 data 对象的默认处理
      processData:false,
      // 设置 xhr 对象，增加 onprogress 事件
      xhr:function() {
        var xhr = $.ajaxSettings.xhr();
        xhr.upload.onprogress = function(e) {
          showprogress(start + e.loaded, file.size);
        };
        return xhr;
      },
      success:function(res) {
        // console.log(res.succ)
      }
    }).then(function() {
      if (start < file.size) {
        // 进行下一段上传
        if (!pause) {
          start += preUploadSize;
          upload(file);
        }
      } else {
        uploadComplete();
        $('button[name=pause], .progress-bar').addClass('hide');
        alert('上传结束');
      }
    }, function() {
      alert('上传错误');
    });
  }

  // 上传完成
  function uploadComplete() {
    var url = '__ROOT__/admin.php/Ajax/uploadComplete/filename/' + encodeURIComponent(file.name);

    console.log(url);

    $.get(url, function(res) {
      if (res.status == 1) {
        console.log("保存成功");
        $('#video-path').val(res.path);
        // $('#video-path').removeClass('hide');
        $('#video-name').val(file.name);
      } else {
        console.log("保存失败");
      }
    }, 'json');
  }


  // 显示进度条
  function showprogress(start, filesize) {
    $('.progress-bar').width(start/filesize * 100 + '%');
  }

  // 为暂停按钮绑定事件
  $(document).on('click', 'button[name=pause]', function() {
    var obj = $(this);
    if (pause) {
      obj.text('暂停');
      upload(file);
    } else {
      obj.text('继续');
    }
    pause = !pause;
  });

  ///
  //  上传缩略图操作
  ///

  // 图片文本域改变绑定事件
  $('#video').change(function (){
    var url = '__ROOT__/admin.php/Ajax/uploadImg';
    console.log(url);
    $.ajaxFileUpload({
      url:url,
      secureuri:false,
      fileElementId:'video',
      dataType:'json',
      success:function(data) {
        console.log(data);
        // console.log('上传的返回值在这里');
        if (data.status == 1) {
          var imgSrc = data.info;
          console.log(imgSrc);
          $('#video-img').attr('src', imgSrc);
          $('#img-path').val(imgSrc);
        }
      },
      error:function(data, status, e) {
        console.log(e);
      }
    });
  });





}(jQuery)

</script>
